<script setup>
import { onActivated, onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue'
import { apiGetListenClass, apiGetListenTestList } from '@/api/exam.js'
import { useRouter } from 'vue-router'
import { apiReDoExam } from '@/api/exam'
import { showToast } from 'vant'

defineOptions({
    name: 'ListenClass'
})

const router = useRouter()
const showPopup = ref(false)
const currentType = ref('')

const state = reactive({
    rows: [],
    testList: [],
    currentTest: {
        examId: null,
        recordId: null
    },
    activeTab: Number(0)
})

onBeforeMount(() => {
    document.querySelector('body').setAttribute('style', 'background:#f6f8fc;')
})

onBeforeUnmount(() => {
    document.querySelector('body').setAttribute('style', 'background:#fff;')
})

onActivated(() => {
    document.querySelector('body').setAttribute('style', 'background:#f6f8fc;')
    getClassList(1)
})

function clickTab(index, title) {
    currentType.value = title
    getExamList()
}

/**
 * 获取头部分类列表
 * @param  type number 1 顺序模式 2 分类
 */
function getClassList(type) {
    apiGetListenClass(type).then((res) => {
        state.rows = res
        // state.rows.push(...res)
        // state.rows.push(...res)
        if (!currentType.value) {
            currentType.value = res[0]
        }
        getExamList()
    })
}

/**
 * 获取试卷列表
 */
function getExamList() {
    if (currentType.value) {
        apiGetListenTestList({
            searchStr: currentType.value,
            type: 1
        }).then((res) => {
            state.testList = res
        })
    }
}

/**
 * 跳转到做题页面
 * @param item Object
 */
function startExam(item) {
    state.currentTest = item
    if (item.practiceStatus === 1) {
        // 弹出提示框
        showPopup.value = true
    } else {
        getExamData({
            examId: item.examId
        })
    }
}

function getExamData(data) {
    const toast = showToast({
        type: 'loading',
        message: '加载中...',
        forbidClick: true,
        duration: 0
    })
    apiReDoExam(data).then((res) => {
        toast.close()
        router.push({
            name: 'exam',
            query: {
                id: res.recordId
            }
        })
    })
}

// 弹窗取消按钮
function handleCancel() {
    showPopup.value = false
    getExamData({
        examId: state.currentTest.examId,
        recordId: state.currentTest.recordId,
        reAnswerFlag: false
    })
}

// 弹窗确定按钮
function handleOk() {
    showPopup.value = false
    getExamData({
        examId: state.currentTest.examId,
        recordId: state.currentTest.recordId,
        reAnswerFlag: true
    })
}
</script>
<template>
    <div class="listen-class">
        <div class="header">
            <div class="row-list">
                <van-tabs
                    v-model:active="state.activeTab"
                    @change="clickTab"
                    line-width="18"
                    color="#FD453D">
                    <van-tab v-for="(item, index) in state.rows" :title="item" :key="index">
                    </van-tab>
                </van-tabs>
            </div>
        </div>
        <div class="content">
            <div v-for="(item, index) in state.testList" :key="'test-' + index">
                <div class="title-name">{{ item.typeName }}</div>
                <div class="test-list">
                    <div
                        class="test-item"
                        v-for="(sub, ind) in item.practiceList"
                        :key="'exam-' + ind"
                        @click="startExam(sub)">
                        <div
                            class="last-test"
                            :class="{ 'last-test-radius': ind > 0 }"
                            v-if="sub.latestPractice">
                            上次练习
                        </div>
                        <div class="exam-title">
                            <p class="test-title">{{ sub.examName }}</p>
                            <p class="test-flag" v-if="sub.knowledgeType">
                                {{ sub.knowledgeType }}
                            </p>
                        </div>
                        <div class="item-right">
                            <div class="accuracy" v-if="sub.practiceStatus === 2">
                                正确率：
                                <p>
                                    <span class="big-text">{{ sub.rightTopicCount }}</span>
                                    <label>/{{ sub.allTopicCount }}</label>
                                </p>
                            </div>
                            <van-icon name="arrow" />
                        </div>
                    </div>
                    <div class="hr-line"></div>
                </div>
            </div>
        </div>

        <!--弹窗-->
        <van-popup v-model:show="showPopup" round :style="{ padding: '20px', width: '300px' }">
            <div class="popup-blank">
                <div class="title">请选择</div>
                <div class="btn-list">
                    <div class="btn popup-cancel" @click="handleCancel">继续作答</div>
                    <div class="btn popup-ok" @click="handleOk">重新作答</div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<style scoped lang="scss">
.header {
    //background: #b2b2b2;
    position: sticky;
    top: 0;
    z-index: 1;
}
.row-list {
    // background: red;
    :deep(.van-tabs__line) {
        bottom: 22px;
    }
}
.content {
    padding: 0.267rem 1rem 20px 1rem;
    .title-name {
        color: #999999;
        font-size: 0.933rem;
        line-height: 30px;
        height: 30px;
    }
    .test-list {
        background: #ffffff;
        border-radius: 0.333rem;
        .test-item {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 4rem;
            border-bottom: 1px solid #f5f5f5;
            padding: 0.667rem;
            .test-title {
                font-size: 0.933rem;
                font-weight: bold;
                color: #333333;
            }
            .test-flag {
                font-size: 0.667rem;
                color: #999999;
            }
        }
        .item-right {
            display: flex;
            align-items: center;
            .accuracy {
                align-items: center;
                font-size: 0.733rem;
                color: #333333;
                display: inline-flex;
                .big-text {
                    font-weight: bold;
                    font-size: 1rem;
                }
            }
        }
        .last-test {
            position: absolute;
            right: 0;
            top: 0;
            background: rgba(253, 69, 61, 0.1);
            color: #fd453d;
            font-size: 0.733rem;
            height: 1.067rem;
            border-radius: 0 0.333rem 0 0.333rem;
            padding: 0 4px;
        }
        .last-test-radius {
            border-radius: 0 0 0 0.333rem;
        }
    }
}

/* 弹窗 */
.popup-blank {
    .title {
        color: #333333;
        font-size: 14px;
        line-height: 40px;
        text-align: center;
    }
    .btn-list {
        .btn {
            margin: 0 auto;
            width: 160px;
            height: 40px;
            border-radius: 8px;
            background: #f6f8fc;
            font-size: 14px;
            text-align: center;
            line-height: 40px;
        }
        .popup-cancel {
            margin-top: 5px;
            background: rgba(253, 69, 61, 0.1);
            color: #fd453d;
        }
        .popup-ok {
            margin-top: 15px;
            background: #fd453d;
            color: #ffffff;
        }
    }
}
</style>
